<ng-container>
    <div class="box-all">
        <div nz-row>
            <div nz-col nzXs="24" nzSm="14">
                <div nz-row class="total-style">
                    <div nz-col nzXs="24" nzSm="8">
                        <div class="redeem-total">
                            <div class="title">可用积分</div>
                            <div class="redeem-unuse">60</div>
                        </div>
                        <!--<nz-card [nzBordered]="false" nzNoPadding class="redeem-total">-->
                        <!--<div class="title">可用积分</div>-->
                        <!--<div class="redeem-unuse">60</div>-->
                        <!--</nz-card>-->
                    </div>
                    <div nz-col nzXs="24" nzSm="8">
                        <div class="redeem-total">
                            <div class="title">总积分</div>
                            <div class="redeem">60</div>
                        </div>
                        <!--<nz-card [nzBordered]="false" nzNoPadding class="redeem-total">-->
                        <!--<div class="title">总积分</div>-->
                        <!--<div class="redeem">60</div>-->
                        <!--</nz-card>-->
                    </div>
                    <div nz-col nzXs="24" nzSm="8">
                        <div class="redeem-total">
                            <div class="title">消费扣除</div>
                            <div class="redeem">0</div>
                        </div>
                        <!--<nz-card [nzBordered]="false" nzNoPadding class="redeem-total">-->
                        <!--<div class="title">消费扣除</div>-->
                        <!--<div class="redeem">0</div>-->
                        <!--</nz-card>-->
                    </div>
                </div>
            </div>
        </div>


        <div nz-row nzGutter="16" style="height: 510px">
            <!--宽屏显示为表格-->
            <div nz-col nzSpan="24" class="padding-left-right-5px display-none-smaller-Sm">
                <nz-card [nzBordered]="false" nzNoPadding class="business-card">
                    <div class="list-head-container">
                        <div class="list-head-title">消费明细</div>
                        <div class="list-head-word">积分变动</div>
                        <div class="list-head-word">时间</div>
                        <div class="list-head-word">可用积分</div>
                    </div>
                    <div nz-row [nzType]="'flex'" [nzJustify]="'center'" [nzAlign]="'middle'"
                         class="py-sm bg-grey-lighter-h point border-top display-none-smaller-Sm"
                         *ngFor="let item of todoData">
                        <div class="business-list-container">
                            <div class="list-content-title">
                                <div nz-col [nzSpan]="24">
                                    <p class="list-topic overFlow">{{item.content}}</p>
                                </div>
                            </div>

                            <div class="list-content-word">
                                {{item.behave}}
                            </div>
                            <div class="list-content-time-container">
                                <div class="list-content-time">
                                    {{item.times}}
                                </div>
                            </div>
                            <div class="list-content-word">
                                {{item.redeem}}
                            </div>
                            <!--<div class="list-content-word">-->
                            <!--{{item.redeem}}-->
                            <!--</div>-->

                        </div>
                    </div>
                </nz-card>
            </div>
            <!--窄屏显示为卡片-->
            <div nz-col nzXs="24" class="padding-left-right-5px list-to-card-container display-none-bigger-Sx">
                <nz-card [nzBordered]="false" nzNoPadding class="business-card">
                    <ng-container *ngFor="let item of todoData">
                        <div class="list-to-card-one border-bottom hover">
                            <!--<div class="list-to-card-title">-->
                            <div nz-col [nzSpan]="10">
                                <p class="list-topic overFlow">{{item.content}}</p>
                                <div class="list-to-card-behave">{{item.behave}}</div>
                            </div>
                            <!--</div>-->
                            <div nz-col [nzSpan]="14">
                                <div class="list-to-card-content">
                                    <!--<div class="list-to-card-word list-to-card-word2"><strong>地区：</strong>云南昆明</div>-->
                                    <div class="list-to-card-word"><strong>时间：</strong>{{item.times}}</div>
                                    <div class="list-to-card-word"><strong>积分：</strong>{{item.redeem}}</div>
                                </div>
                            </div>
                        </div>
                    </ng-container>
                </nz-card>
            </div>
        </div>
    </div>
</ng-container>
